<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./libs/pagination.css">
    <style>
        .goodsBox{width: 1000px;overflow: hidden;border: solid 1px black;}
        .goodsBox .box{width: 200px;border: solid 1px black;box-sizing: border-box;text-align: center;float: left;}
        .goodsBox .box p{text-align: left;margin: 0;line-height:20px;height:40px;overflow: hidden;}
        img{width: 180px;height: 180px;}
    </style>
</head>
<body>
    <div class="box">
        <div class="pageBox pagination"></div>
        <div class="goodsBox"></div>
    </div>
</body>
<script src="../jquery.js"></script>
<script src="./libs/jquery.pagination.js"></script>
<script>

    class GoodsPage{
        constructor(ops = {}){
            // 1. 接收并处理参数
            this.url = ops.url;
            this.goodsBox = ops.goodsBox || $("<div></div>");
            this.pageBox = ops.pageBox || $("<div></div>");
            this.num = ops.num || 10;
            this.index = ops.index || 0;

            // 2. 发起请求
            this.load();
        }
        load(){
            $.ajax({
                url:this.url,
                data:{
                    sKey:"零食"
                },
                success:res=>{
                    // 3. 接收并解析数据
                    console.log(res.msg)
                    this.res = res.msg;
                    // 4. 根据分页插件，创建页码
                    this.createPage();
                }
            })
        }
        createPage(){
            this.pageBox.pagination(this.res.length, {
                items_per_page: this.num,
                current_page: this.index,
                callback:i=>{
                    // 5. 修改当前页码
                    this.index = i;

                    // 6. 计算每页要显示数据的公式
                    // 0~5      num5*index0 ~ num5*index0+num5
                    // 5~10     num5*index1 ~ num5*index1+num5
                    // 10~15    num5*index2 ~ num5*index2+num5
                    // 15~20    num5*index3 ~ num5*index3+num5
                    
                    // 7. 根据公式遍历数据，拼接页面结构
                    let str = "";
                    for(let i=this.num*this.index; i<this.num*this.index+this.num; i++){
                        // 防止索引超出数据最大长度
                        if(i < this.res.length){
                            str += `<div class="box">
                                    <img src="${this.res[i].img}" alt="">
                                    <p>${this.res[i].proName}</p>
                                    <p>￥${this.res[i].price}</p>
                                </div>`
                        }
                    }
                    // 8. 将拼接好的页面结构，填充到指定容器
                    this.goodsBox.html(str);
                }
            })
        }
    }

    new GoodsPage({
        url:"http://icodeilife.club:3000/api/pro/search",
        goodsBox:$(".goodsBox"),
        pageBox:$(".pageBox"),
        num: 9,
        index: 0
    });
    
</script>
</html>